<template>
  <!-- 添加宠物页面 -->
  <div class="pet">
    <!-- navbar标题栏 -->
    <van-nav-bar title="宠物资料" left-text="返回" left-arrow @click-left="goBack" />
    <!-- 头像区域 -->
    <div class="pic">
      <!-- 头像上传组件 -->
      <van-uploader
        class="list-upload"
        :max-count="1"
        accept="image/jpeg, image/png"
        :after-read="afterRead"
        :preview-image="false"
        multiple
        v-model="fileList"
      >
        <!-- 自定义上传效果 -->
        <template v-if="imgUrl==null">
          <van-image
            fit="cover"
            round
            width="10rem"
            height="10rem"
            :src="require('@/assets/img/logo.jpg')"
            style="background-color:#fff;border:1px solid gray;padding:1rem;box-sizing: border-box;"
          />
        </template>
      </van-uploader>
      <!-- 如果选择了头像后，这里显示图片 -->
      <img v-if="imgUrl" alt class="afterImg" :src="imgUrl" />
      <!-- 右下角小相机图标 -->
      <img
        v-show="hidden_xiangji"
        src="../assets/img/xiangji.png"
        style="width: 2rem; position: absolute; top: 13rem; left: 21.5rem"
      />
    </div>
    <!-- 表单 -->
    <van-field name="radio" label="类型">
      <template #input>
        <van-radio-group v-model="typeRadio" direction="horizontal">
          <van-radio name="cat">猫咪</van-radio>
          <van-radio name="dog">狗狗</van-radio>
          <!-- <van-radio name="bird">小鸟</van-radio> -->
        </van-radio-group>
      </template>
    </van-field>
    <!-- 宠物名 -->
    <van-field v-model="petName" label="名字" placeholder="请填写宠物名字" />
    <!-- 宠物年龄 -->
    <van-field v-model="petAge" type="number" label="年龄" placeholder="请输入阿拉伯数字" />
    <!-- 宠物性别 -->
    <van-field name="radio" label="性别">
      <template #input>
        <van-radio-group v-model="sexRadio" direction="horizontal">
          <van-radio name="female">女生</van-radio>
          <van-radio name="male">男生</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <!-- 宠物品种 -->
    <van-field v-model="petBreed" label="品种" placeholder="非必填" />
    <van-field
      v-model="describe"
      rows="2"
      autosize
      label="宠物简介"
      type="textarea"
      maxlength="50"
      placeholder="非必填"
      show-word-limit
    />
    <div style="margin: 16px">
      <van-button
        style="background-color: #f8e176;color:#fff;"
        size="large"
        round
        @click="AddPetData"
      >添加</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: null, // 上传成功之后的图片地址
      fileList: [],
      hidden_xiangji: true,
      petName: "", // 宠物名字
      petNameErr: false,
      petAge: "", //宠物年龄
      petAgeErr: false,
      typeRadio: "cat", // 宠物类型
      sexRadio: "female", // 宠物性别
      petBreed: "", // 宠物品种
      describe: "" // 宠物简介
    };
  },
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      this.$router.back();
    },
    /**
     * 上传头像
     */
    afterRead(file) {
      let that = this;
      // 此时可以自行将文件上传至服务器
      console.log(file);
      // 创建表单数据对象
      var data = new FormData();
      data.append("file", file.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      // 上传图片
      this.http
        .post("http://192.168.13.21:9001/upload", data, config)
        .then(res => res.data)
        .then(res => {
          if (res.code == 200) {
            console.log("文件上传成功返回：", res.data);
            that.fileList.push(res.data);
            that.imgUrl = res.data;
            console.log("-----", that.imgUrl);
            that.hidden_xiangji = !this.hidden_xiangji;
          }
        });
    },
    /**
     * 添加宠物
     */
    AddPetData() {
      if (!this.imgUrl) {
        this.$msg.fail("请添加宠物头像");
        return;
      }
      if (!this.petName) {
        this.$msg.fail("请添加宠物名");
        return;
      }
      if (!this.petAge) {
        this.$msg.fail("请添加宠物年龄");
        return;
      }
      // 封装请求数据
      const data = {
        pImg: this.imgUrl,
        pName: this.petName,
        pYear: this.petAge,
        pGender: this.sexRadio == "female" ? "0" : "1",
        pType: this.typeRadio == "cat" ? "1" : "2",
        pContent: this.describe,
        pBreed: this.petBreed
      };
      // 请求服务器
      this.http
        .post(this.$api.addPet, data)
        .then(res => res.data)
        .then(res => {
          if (res.code == 200) {
            this.$msg.success(res.msg);
            this.$router.back();
          } else {
            this.$msg.fail(res.msg);
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.pic {
  background-color: #f8e176;
  height: 15rem;
  text-align: center;
  padding-top: 5rem;
  position: relative;
}
.afterImg {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid gray;
  background-color: #f0f0f0;
}
</style>